<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>亚启配置页面</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <script src="https://unpkg.com/axios@0.21.0/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.14.1/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui@2.14.1/lib/index.js"></script>
</head>
<body>
<div id="app" >
    <div style="margin-left: 500px;margin-top: 100px">

        <el-form :model="form" :inline="false" :rules="rules" ref="form" size="small" label-width="100px">

            <el-form-item label="后台地址" prop="host">
                <el-input
                        inline
                        placeholder="请输后台服务器地址"
                        v-model="form.host"
                        clearable
                        style="width: 230px;">
                </el-input>
                <el-button type="success" @click="test">测试连接</el-button>
            </el-form-item>

            <el-form-item label="服务器ip" prop="ip">
                <el-input
                        placeholder="请输opcServer服务器ip地址"
                        v-model="form.ip"
                        clearable
                        style="width: 230px;">
                </el-input>
            </el-form-item>

            <el-form-item label="服务器端口" prop="port">
                <el-input
                        placeholder="请输opcServer服务器端口"
                        v-model="form.port"
                        clearable
                        style="width: 230px;">
                </el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" plain @click="submit">开始采集</el-button>
                <el-button type="primary" plain @click="scanSubmit">扫描采集</el-button>
                <el-button @click="reset">重置</el-button>
            </el-form-item>

        </el-form>


    </div>

</div>
<script>

    let vm = new Vue({
        el: '#app',
        data: {
            baseURI: '',
            timeout: 10000,
            form: {
                host: '',
                ip: '',
                port: ''
            },
            rules: {
                host: [{required: true, message: '后台主机地址不能为空', trigger: 'blur'}],
                ip: [{required: true, message: 'ip不能为空', trigger: 'blur'}],
                port: [{required: true, message: '端口号不能为空', trigger: 'blur'}],
            }
        },
        methods: {
            test() {
                axios({
                    method: 'get',
                    url: 'http://'+this.form.host
                }).then(function (res) {
                    if (res.status === 200) {
                        alert("测试连接成功")
                    }

                }).catch(function (err) {
                    console.log(err);
                    alert("连接后台失败，请重试")
                });
            },
            submit() {
                axios({
                    method: "get",
                    url: 'http://'+this.form.host+'/connect',
                    params: {
                        ip:this.form.ip,
                        port:this.form.port
                    }
                }).then(res=>{
                    console.log(res)
                })
            },
            scanSubmit(){
                if (this.from.port)  {
                    axios({
                        method: "get",
                        url: 'http://'+this.form.host+'/scan/connect',
                        params: {
                            port:this.form.port
                        }
                    }).then(res=>{
                        console.log(res)
                    })
                } else {
                    alert("请确保输入正确的端口号")
                }
            },
            reset() {
                this.$refs.form.resetFields();
            }
        }
    });
    axios.defaults.timeout = vm.timeout;

</script>
</body>
</html>
